<template>
  <div class="communication_wrap loading_structure">
    <div class="search_wrap">
      <div class="f_v_t">
        <div class="f_v_t_left">
          <div class="f_s_w">
            <div class="f_s_icon"></div>
            <input
              type="search"
              v-model="searchval"
              placeholder="输入工号/姓名/手机号搜索"
              @keyup.enter="searchKeyUp"
            /><img
              v-show="searchval.trim() != ''"
              @click.stop.prevent="searchval = ''"
              src="static/image/home/clear_icon.png"
            />
          </div>
        </div>
      </div>
    </div>
    <div v-show="searchval" class="structureList">
      <div
        v-for="(temp, index) in search_list_array.user"
        :key="index + 'key'"
        class="list_user_info"
        @click.stop.prevent="searchToView($event, temp)"
        @dblclick.stop.prevent="dbtoNewChat(temp)"
      >
        <!-- zk修改v-lazy换成：src -->
        <img
          draggable="false"
          :src="
            !$isNull(temp.head)
              ? `${$store.state.headPathUrl}${temp.id}${temp.head}.PNG`
              : `static/image/home/person_${temp.gender == 2 ? 2 : 1}.png`
          "
          class="s_person_icon img-border"
          :onerror="defaultImg"
        />
        <div class="list_main_info">
          <!-- zk118修改<span v-html="$setKeyWords(temp.name,searchValue,"#fa7500")"></span> 参数依次是原字符串，关键字以及字体颜色 -->
          <h3>
            <div>
              <span
                v-html="
                  $replaceKeyWords(temp.name, oldsearchval, '#fa7500', 16)
                "
              ></span
              >{{ temp.departmentname ? `(${temp.departmentname})` : "" }}
            </div>
          </h3>
          <p class="info_main_detail">
            <span>
              工/账号：{{ temp.employeeno || "--" }}/{{ temp.account || "--" }}
            </span>
            <span> 手机：{{ temp.mobile || "--" }} </span>
          </p>
        </div>
        <div
          v-if="
            index == search_list_array.user.length - 1 &&
            search_list_array.count > search_list_array.user.length
          "
          class="msg_search_more"
          @click.stop="more_search('user')"
        >
          显示更多
        </div>
      </div>
    </div>
    <div class="structureList" v-show="!searchval">
      <structure-list
        v-for="(temp, tag) in bookList[2].structureList"
        :index="tag"
        :item="temp"
        :key="tag + 'str'"
        @getRightMenu="getRightMenu"
        @cancelRightMenu="cancelRightMenu"
      ></structure-list>
      <div
        class="right_menu"
        :style="{
          top: getRightMenuPosition.x + 'px',
          left: getRightMenuPosition.y + 'px',
        }"
        v-if="rightShow"
      >
        <ul>
          <li @click.stop.prevent="addGrounpMengers">发起群聊</li>
          <li @click.stop.prevent="cancelAddGrounpMengers">取消</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import structureList from "../template/structureList.vue"; //组织架构列表组件
import { getUserListInfoPage, addGroup } from "@/api/sessionListSider.js";
export default {
  name: "structureMain",
  props: {
    groupList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    addUserDisabled: {
      type: Boolean,
    },
    bookList: {
      type: Array,
    },
  },
  components: {
    structureList,
  },
  data() {
    return {
      groupListShow: null,
      rightShow: false,
      groupInfo: null,
      getRightMenuPosition: {
        x: 0,
        y: 0,
      },
      defaultImg: 'this.src="static/image/home/person_1.png"',
      searchHave: true,
      pageNum: 1,
      pageSize: 10,
      Timeout: null,
    };
  },
  computed: {
    myInfo() {
      return this.$store.state.myInfo;
    },
    search_list_array: {
      get() {
        return this.$store.state.search_list_array;
      },
      set(val) {
        this.$store.commit("setsearchListArr", val);
      },
    },
    searchval: {
      get() {
        return this.$store.state.searchValue;
      },
      set(val) {
        this.$store.commit("setsearchValue", val);
      },
    },
    oldsearchval: {
      get() {
        return this.$store.state.oldsearchval;
      },
      set(val) {
        this.$store.commit("setoldsearchval", val);
      },
    },
  },
  watch: {},
  methods: {
    //我的群组搜索
    structureSearch() {
      console.log(111);
    },
    toNewChat(i, b) {
      this.$emit("toNewChat", i, b);
    },
    getRightMenu({ $event, item, top, left }) {
      this.groupInfo = item;
      this.rightShow = false;
      this.getRightMenuPosition.x = top;
      this.getRightMenuPosition.y = left;
      this.rightShow = true;
    },
    cancelRightMenu(value) {
      this.rightShow = false;
    },
    addGrounpMengers() {
      // console.log(this.groupInfo);
      // ***********************************************
      let arr = [];
      arr.push({
        type: this.groupInfo.FID ? "1" : "0",
        value: this.groupInfo.FID,
      });
      let groupName = this.groupInfo.LEABLE + "群聊";
      addGroup({
        userid: this.myInfo.id,
        name: groupName,
        introduce: "",
        members: JSON.stringify(arr),
      })
        .then((res) => {
          if (res.result == 200) {
            this.rightShow = false;
            this.$Message.success("创建成功")

          } else if (res.result == 4) {
            this.$Message.warning("系统错误");
          } else if (res.result == 2) {
            this.$Message.warning("无权限");
          } else if (res.result == 500) {
            // 群聊人数多于千人或少于2人
            this.$Message.warning(res.msg);
          }
          this.groupInfo = null;
          this.rightShow = false;
        })
        .catch((err) => {
          this.addUserDisabled = false;
        });
    },
    cancelAddGrounpMengers() {
      this.groupInfo = null;
      this.rightShow = false;
      this.getRightMenuPosition.x = 0;
      this.getRightMenuPosition.y = 0;
    },
    // 查询联系人
    searchFunction(success) {
      getUserListInfoPage({
        // 改为分页接口，新增两个字段
        name: this.oldsearchval,
        pageSize: this.pageSize,
        pageNumber: this.pageNum,
      })
        .then(success)
        .catch((res) => {
          console.log("搜索失败", res);
        });
    },
    searchKeyUp() {
      let info = this.searchval.replace(/\s+/g, ""); // 去除空格
      let next = info == ""; // 是否为空
      this.oldsearchval = info; //zk125新增，保存上次搜索内容，便于展示
      this.pageNum = 1; // 初始化分页 联系人
      this.pageSize = 10; // 初始化分页
      this.searchHave = true; // 初始化显示加载更多

      if (!next) {
        this.$forceUpdate();
        this.searchFunction((res) => {
          this.search_list_array.user = res.data;
          this.$forceUpdate();
          // 新增下载头像
          this.$emit("search_list_array_user", this.search_list_array.user);
        });
      } else {
        this.search_list_array = {
          user: [],
          msg: [],
          broad: [],
        };
      }

      console.log("111", this.search_list_array);
      this.$parent.detailShow = false; //zk125新增
      this.clickIndex = null;
    },
    dbtoNewChat(item) {
      //zk15标注，搜索结果双击
      if (item.id == this.myInfo.id) {
        this.$Message.warning("无法与自己聊天");
        return;
      }
      clearTimeout(this.Timeout);
      this.$emit("searchMdbTochat", item);
    },
    searchToView(e, item) {
      console.log("点了点了");
      //zk15标注，搜索结果单击
      clearTimeout(this.Timeout);
      this.Timeout = setTimeout(() => {
        this.$emit("searchToView", e, item);
      }, 300);
    },
    more_search(temp) {
      console.log("加载更多");
      // 联系人
      this.pageNum++;
      this.searchFunction((res) => {
        if (res.data.length < 30) this.searchHave = false; // 如果查询的数据小于30 隐藏加载更多
        this.search_list_array.user = this.search_list_array.user.concat(
          res.data
        );
        // 新增下载头像
        this.$emit("search_list_array_user", this.search_list_array.user);
      });
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.communication_wrap {
  height: 100%;
  .structureList {
    height: calc(100vh - 90px);
    overflow-y: scroll;
    position: relative;
  }
}
.loading_structure {
  position: relative;
  .right_menu {
    position: absolute;
    z-index: 1009;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 3px 1px #ccc;
    li {
      line-height: 22px;
      cursor: pointer;
      &:hover {
        color: #fa7500;
      }
    }
  }
}
.list_user_info {
  display: flex;
  text-align: left;
  padding: 12px 0;
  cursor: pointer;
  img {
    margin-left: 20px;
  }
  .info_main_detail {
    span {
      display: inline-block;
      color: #999;
    }
    span:first-child {
      width: 210px;
    }
  }
}
.msg_search_more {
  flex-grow: 1;
  text-align: right;
  line-height: 39px;
  margin-right: 60px;
  color: #fa7500;
}
</style>
